import * as vscode from 'vscode';

export class MyWebviewViewProvider implements vscode.WebviewViewProvider {
  public static readonly viewName = 'demoSidebar';
  private _view?: vscode.WebviewView;

  //! 暴露一个方法 用于将服务器返回的请求消息 在侧边栏中显示
  public postMessage(message: any): void {
    console.log('语言服务服务端 转发到客户端 在转发到 webweiw::: ', message);
    if (this._view) {
      this._view.webview.postMessage({
        type: 'serverResponse',
        text: message,
      });
    } else {
      console.warn('Webview is not initialized.');
    }
  }

  //! 将用户输入框中的消息 发送到服务器 逻辑处理 调用 并执行 sendToLanguageServer
  private async _sendToLanguageServer(text: string): Promise<string> {
    try {
      const response = await vscode.commands.executeCommand(
        'cw-vscode-ai.sendToLanguageServer',
        text
      );
      // 如果命令返回了结果
      if (response) {
        return response.toString();
      }
      return `正在处理消息: ${text}, 请稍后...`;
    } catch (error) {
      console.error('发送消息到语言服务器失败:', error);
      throw new Error(
        `无法连接到语言服务器: ${
          error instanceof Error ? error.message : '未知错误'
        }`
      );
    }
  }

  //! 处理接收到的聊天消息 并在聊天窗口中显示
  private _handleChatMessage(text: string) {
    console.log('接收到消息 包括输入框 和 服务器:', text);
    // 这里已经接受到了 消息
    // 消息传递路径是 ifream 输入框查询是 发送消息 ->ifream 的父窗口 -> webview 侧边栏 -> 使用命令 发送到语言服务器 
    // 语言服务器 接受到消息 -返回数据
    if (!this._view) {
      return;
    }
    
    this._sendToLanguageServer(text)
      .then((response) => {
       

        this._view?.webview.postMessage({
          type: 'serverResponse',
          data: response
        });
      })
      .catch((error) => {
        this._view?.webview.postMessage({
          type: 'serverResponse',
          text: `错误: ${error.message}`,
        });
      });
  }

  constructor(private readonly _extensionUri: vscode.Uri) {}

  public async resolveWebviewView(
    webviewView: vscode.WebviewView,
    context: vscode.WebviewViewResolveContext,
    _token: vscode.CancellationToken
  ) {
    this._view = webviewView;

    // 设置 webview 选项
    webviewView.webview.options = {
      enableScripts: true,
      localResourceRoots: [this._extensionUri],
    };

    

    // 设置 webview HTML 内容
    webviewView.webview.html = this._getHtmlForWebview();

    //!监听输入框的消息 触发请求聊天接口
    webviewView.webview.onDidReceiveMessage((message) => {
      switch (message.type) {
        case 'sendMessage':
          this._handleChatMessage(message.text);
          break;
        case 'iframeMessage':
          console.log('接受到iframe消息:', message.data); // 修复语法错误
          console.log('message.data.data.message:是否显示data:: ', message.data.data);
          this._handleChatMessage(JSON.parse(message.data.data).message); // 调用处理函数
          break;
      }
    });
  }
  // 生成 webview HTML 内容
  private _getHtmlForWebview(): string {
    return `<!DOCTYPE html>
    <html lang="zh-cn">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>聊天</title>
    </head>
    <style>
      .chat-container{
        width: 100%;
        height: 100vh;
        display: flex;
      }
    </style>
    <body>
      <div class="chat-container">
         <iframe 
            src="http://caowaiwai.top:1991/" 
            width="100%" 
            height="100%" 
            frameborder="0"
            id="chatIframe"
          ></iframe>
      </div>
     <script>
        // 正确获取 VS Code API 对象
        const vscode = acquireVsCodeApi(); // 必须调用此方法获取 API
        window.addEventListener('message', function(event) {
      console.log('webview HTML 接受所有的信息  需要 按类型 做区分:', event);
      // 根据 type  如果是 iframeMessage 则是输入框输入的查询
      // 如果是 serverResponse 则是响应的返回的信息
      if(event.data.type === 'iframeMessage'){
          // 接受iframe 的消息  将消息发送到 wewbview
          vscode.postMessage({
            type: 'iframeMessage',
            data: event.data
          });
        }else{
            const iframe = document.getElementById('chatIframe');
            console.log('iframe::: ', iframe);
            console.log('接收到服务端返回的信息111111:', event.data);
            iframe.contentWindow.postMessage({
                type: 'newMessages',  // 自定义消息类型
                data: {'content':event.data.text}  // 需要展示的响应内容
            }, '*'); 
      }

        });
      </script>
    </body>
  </html>`;
  }
}
